<template>
  <view class="view-check-list">
    <view class="view-check">
      <Detail :detaiData="detaiData"></Detail>
      <view class="hidden-title">送电申请</view>
      <view class="background-white">
        <uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="120px" labelPosition="top">
          <cu-cell-group>
            <uni-forms-item name="startTime">
              <cu-cell
                title="送电时间"
                required
                link
                placeholder="选择送电时间"
                :description="formData.startTime"
                @click="showTimePicker"
              ></cu-cell>
            </uni-forms-item>
          </cu-cell-group>
        </uni-forms>
      </view>
    </view>
    <view class="submit-group">
      <button class="u-button block" :ripple="true" @click="submit">提交</button>
    </view>
    <CuDateTimePicker ref="timePicker" @change="timePickerChange" />
    <Signature ref="signature" v-model="formData.signatureUrls" auto-upload @success="onSignatureSuccess" />
  </view>
</template>
<script>
import Detail from './components/detail.vue'
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCell from '@/components/cu-cell/cu-cell.vue'
import CuDateTimePicker from '@/components/cu-date-time-picker/cu-date-time-picker.vue'
import Signature from '@/pages/jobSlip/components/ContinueSign.vue'
import { getElectricDetail, startElectric, startUpdate } from '@/api/spw/powerCut.js'
import dayjs from 'dayjs'
export default {
  components: {
    Detail,
    CuCell,
    CuCellGroup,
    CuDateTimePicker,
    Signature
  },
  onNavigationBarButtonTap() {
    uni.navigateTo({
      url: '/pages/jobSlip/power-cut/approveRecord?ticketId=' + this.ticketId
    })
  },
  data() {
    return {
      ticketId: '',
      detaiData: {},
      formData: {
        ticketId: '',
        startTime: '',
        signatureUrls: ''
      },
      rules: {
        startTime: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        }
      }
    }
  },
  onLoad(option) {
    this.ticketId = option.ticketId
    this.formData.ticketId = this.ticketId
    getElectricDetail(this.ticketId).then(({ data }) => {
      this.detaiData = data
    })
  },
  methods: {
    showTimePicker() {
      this.$refs.timePicker.show()
    },
    timePickerChange(value) {
      this.formData.startTime = dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    },
    submit() {
      this.$refs.form.validate().then((res) => {
        if (res) {
          this.$refs.signature.open()
        }
      })
    },
    /**
     * @description  签名成功
     */
    onSignatureSuccess() {
      if (this.detaiData.status === '9') {
        this._edit()
      } else {
        this._save()
      }
    },
    async _edit() {
      startUpdate(this.formData).then(() => {
        this.$modal.showToast('重新申请送电成功')
        uni.navigateBack()
      })
    },
    async _save() {
      startElectric(this.formData).then(() => {
        this.$modal.showToast('申请成功')
        uni.navigateBack()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.view-check-list {
  .view-check {
    margin-bottom: 120px;
  }

  .hidden-title {
    background: #f5f5f5;
    padding: 20rpx 30rpx;
    color: #999;
  }

  .background-white {
    background-color: #fff;
  }
}
</style>
